<template>
  <div class="app-container no-pagination">
    <div class="page-container-title">
      <img src="../../assets/page-title-icon/1.png" alt="">
      <span>普通明细账</span>
    </div>
    <div class="filter-container">
      <div class="left-block">
        <el-select v-model="nullValue" style="width: 100px" placeholder="剔除条件" size="small">
          <el-option label="剔除条件" value="">
            <el-checkbox v-model="searchForm.verifyChecked" true-label="1" false-label="0">剔除未审核凭证</el-checkbox>
          </el-option>
          <el-option label="剔除条件" value="">
            <el-checkbox v-model="searchForm.verifyChecked" true-label="1" false-label="0">剔除结转凭证</el-checkbox>
          </el-option>
          <el-option label="剔除条件" value="">
            <el-checkbox v-model="searchForm.verifyChecked" true-label="1" false-label="0">显示辅助核算项</el-checkbox>
          </el-option>
        </el-select>
        <span class="label-text">凭证类型</span>
        <el-select v-model="searchForm.month" style="width: 80px" size="small" class="theme-select">
          <el-option v-for="(item, index) in $VOUCHER_TYPE_LIST" :key="index" :label="item.label" :value="item.value"/>
        </el-select>
        <span class="label-text">凭证号</span>
        <el-input v-model="searchForm.keyword" style="width: 100px" size="small"/>
        <span class="label-text">记账日期</span>
        <el-date-picker
          v-model="searchForm.value1"
          size="small"
          style="width: 240px"
          type="daterange"
          range-separator="~"
          start-placeholder="开始日期"
          end-placeholder="结束日期"/>
        <span class="label-text">科目</span>
        <subject-range-select :start-code.sync="searchForm.startCode" :end-code.sync="searchForm.endCode"/>
      </div>
      <div class="right-block">
        <el-input v-model="searchForm.keyword" style="width: 100px;margin-right: 10px" suffix-icon="el-icon-search" size="small" placeholder="摘要"/>
        <el-button type="primary" size="small">导出</el-button>
        <el-button type="primary" size="small">打印</el-button>
      </div>
    </div>
    <el-row :gutter="20">
      <el-col :span="5">
        <el-card>
          <el-input v-model="filterText" placeholder="搜索科目名称/编码" size="small" style="margin-bottom: 10px"/>
          <el-tree
            ref="tree"
            :data="subjectTree"
            :props="defaultProps"
            :filter-node-method="filterNode"
            class="filter-tree"
            default-expand-all/>
        </el-card>
      </el-col>
      <el-col :span="19" class="mini-container">
        <div class="table-title">普通明细账</div>
        <el-table
          :data="tableData"
          :header-cell-style="{textAlign: 'center'}"
          style="width: 100%">
          <el-table-column
            prop="date"
            label="科目编码"/>
          <el-table-column
            prop="date"
            label="科目名称"/>
          <el-table-column
            prop="date"
            label="余额方向"/>
          <el-table-column label="期初余额">
            <el-table-column
              prop="name"
              label="数量"/>
            <el-table-column
              prop="name"
              label="金额"/>
          </el-table-column>
          <el-table-column label="本年借方累计">
            <el-table-column
              prop="name"
              label="数量"/>
            <el-table-column
              prop="name"
              label="金额"/>
          </el-table-column>
          <el-table-column label="本年贷方累计">
            <el-table-column
              prop="name"
              label="数量"/>
            <el-table-column
              prop="name"
              label="金额"/>
          </el-table-column>
          <el-table-column label="年初余额">
            <el-table-column
              prop="name"
              label="数量"/>
            <el-table-column
              prop="name"
              label="金额"/>
          </el-table-column>
        </el-table>
        <div class="page-pagination">
          <pagination/>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import SubjectRangeSelect from '@/businessComponents/SubjectRangeSelect'
import { mapGetters } from 'vuex'
function createSearchForm(tar) {
  let raw = {
    keyword: '',
    month: '1',
    startCode: '101',
    endCode: '1011'
  }
  if (tar) {
    raw = Object.assign(raw, tar)
  }
  return raw
}
export default {
  name: 'GeneralSubLedger',
  components: { Pagination, SubjectRangeSelect },
  data() {
    return {
      searchForm: createSearchForm(),
      noShowCount: false,
      tableData: [{
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-02',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-04',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-01',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-08',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-06',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-07',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }],
      filterText: '',
      data: [{
        id: 1,
        label: '一级 1',
        children: [{
          id: 4,
          label: '二级 1-1',
          children: [{
            id: 9,
            label: '三级 1-1-1'
          }, {
            id: 10,
            label: '三级 1-1-2'
          }]
        }]
      }, {
        id: 2,
        label: '一级 2',
        children: [{
          id: 5,
          label: '二级 2-1'
        }, {
          id: 6,
          label: '二级 2-2'
        }]
      }, {
        id: 3,
        label: '一级 3',
        children: [{
          id: 7,
          label: '二级 3-1'
        }, {
          id: 8,
          label: '二级 3-2'
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'showName'
      }
    }
  },
  component: { Pagination },
  computed: {
    ...mapGetters([
      'subjectTree'
    ])
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  },
  created() {
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .mini-container {
    min-height: calc(100vh - 160px);
  }
</style>

